import { View, ScrollView,Button } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import  {useRef,useState,useEffect} from 'react'
import styles from './index.module.less'

export default function Index () {
  const [list,setList]=useState<number[]>([])  //  列表数据
  const [refresh,setRefresh]=useState(false)  // 是否处于刷新状态
  const [status,setStatus]=useState<0 | 1 | 2>(0)  // 刷新状态 0：下拉刷新 1：正在刷新 2：刷新完成
  console.log('status',status)
  let statusText=''  // 刷新状态文字
  switch (status) {
    case 0:
      statusText = '下拉刷新'
      break;
    case 1:
      statusText = '正在刷新'
      break;
    case 2:
      statusText = '刷新完成'
      break;
  }

  //控件下拉
  function onRefresherPulling(){
    console.log("onRefresherPulling")
    setRefresh(true)
    setStatus(0)
  }
//释放下拉，开始刷新
  function onRefresherRefresh(){
    setStatus(1)
    setTimeout(()=>{
      setRefresh(false)
    },3000)
    console.log("onRefresherRefresh",refresh)
  }
  // 刷新完成，控件复位
  function onRefresherRestore(){
    console.log("onRefresherRestore")
    setRefresh(false)
    setStatus(2)
  }
  // 刷新被终止
  function onRefresherAbort(){
    setRefresh(false)
    setStatus(0)
    console.log("onRefresherAbort")
  }
  // 触底事件
  function onScrollToLower(){
    console.log('滚动到底部')
  }
  function onDelete(index) {
    setList((prevList)=>prevList.filter((item,index2)=>index2!==index))
  }
  useEffect(()=>{
    let arr=[]
    for(let i=0;i<100;i++){
      arr.push(`项目${i}`)
    }
    console.log(arr)
    setList(arr)
  },[])
  useLoad(() => {
    console.log('Page loaded.')
  })
  return (
    <View className={styles.scrollWrap}>
      <ScrollView
      className={`border-red ${styles.scroll}`}
      scrollY
      refresherEnabled={true}
      refresherTriggered={refresh}
      onScrollToLower={onScrollToLower}
      onRefresherPulling={onRefresherPulling}
      onRefresherRefresh={onRefresherRefresh}
      onRefresherRestore={onRefresherRestore}
      onRefresherAbort={onRefresherAbort}
      >
        {/* 下拉列表刷新样式 */}
        <View className={styles.refresher}>{statusText}</View>
        {/* 列表本体 */}
        <View>
        {list.length> 0 &&
            list.map((item,index)=>{
              return (
                <>
                  <View className={styles.listItem} key={index}>{item}

                    <Button onClick={()=>onDelete(index)}>删除</Button>

                  </View>
                </>
              )
            })
          }
        </View>
      </ScrollView>
    </View>
  )
}
